// 求职者信息完善的路由容器组件
import React, {Component} from 'react';
import {connect} from 'react-redux';
import HeaderSelector from '../../components/header-selector/header-selector'
import {InputItem, TextareaItem, Button, NavBar} from 'antd-mobile'
import {update} from '../../redux/action'
import {Redirect} from 'react-router-dom'

export class Qiuzhi extends Component {
    state = {
        header:'',
        post:'',
        info:'',
    };

    // 更新header状态
    setHeader = (header) => {
        this.setState({
            header
        })
    };

    handleChange = (name, val) => {
        this.setState({
            [name]:val
        })
    };
    save = () => {
        this.props.update(this.state)
    };

    render(){
        // 如果信息已经完善 自动重定向到对应主界面
        const {header, type} = this.props.user;
        if(header){
            const path = type === 'qiuzhi' ? '/qiuzhiinfo' : '/zhaopininfo';
            return <Redirect to={path}/>
        }
        return(
            <div>
                <NavBar>求职者信息完善</NavBar>
                <HeaderSelector setHeader={this.setHeader}/>
                <InputItem placeholder={'请输入职位'} onChange={val => {this.handleChange('post', val)}}>求职岗位:</InputItem>
                <TextareaItem title={'个人介绍:'} rows={3} onChange={val => {this.handleChange('info', val)}}/>
                <Button type={'primary'} onClick={this.save}>保&nbsp;&nbsp;&nbsp;存</Button>
            </div>
        )
    }
}

export default connect(
    state => ({user:state.user}),
    {update}
)(Qiuzhi)
